<template>
  <div class="filterStyle">
    <el-row class="search-row">
      <el-col :span="24">
        <el-row :gutter="20">
          <slot name="firstRowContent"></slot>
        </el-row>
        <template v-if="showFoldBtn">
          <el-collapse-transition>
            <div class="filterContent" v-if="showContent" key="box1">
                <slot name="filterContent"></slot>
            </div>
          </el-collapse-transition>
        </template>
      </el-col>
    </el-row>
    <el-row class="search-row">
      <el-col :span="12" :offset="12" style="text-align: right">
        <el-button
          @click="closeFilter"
          :icon="showContent ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          class="white-btn filterClose"
          v-if="showFoldBtn"
          >{{ showContent ? $t("fold") : $t("unfold") }}</el-button
        >
        <el-button
          @click="resetForm"
          icon="el-icon-refresh-left"
          class="white-btn"
          >{{ $t("reset") }}</el-button
        >
        <el-button
          @click="search()"
          icon="el-icon-search"
          class="dark-btn search-btn"
          >{{ $t("search") }}</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
// resetForm,和search方法重置筛选项和搜索列表
export default {
  name: 'FilterToolBar',
  data () {
    return {
      showContent: false
    }
  },
  props: {
    showFoldBtn: {
      type: Boolean,
      default: true
    }
  },

  methods: {
    closeFilter () {
      this.showContent = !this.showContent
    },
    resetForm () {
      this.$emit('resetForm')
    },
    search () {
      this.$emit('search')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.filterStyle {
  margin-bottom: 10px;
}
</style>
